$(document).ready(function() {
    // 导航切换功能
    $('#nav-generate, #nav-upload, #nav-results').on('click', function() {
        // 移除所有活跃状态
        $('.nav-item').removeClass('active');
        $(this).addClass('active');
        
        // 隐藏所有内容区域
        $('.content-section').addClass('d-none');
        
        // 显示对应的内容
        if ($(this).attr('id') === 'nav-generate') {
            $('#generate-section').removeClass('d-none');
        } else if ($(this).attr('id') === 'nav-upload') {
            $('#upload-section').removeClass('d-none');
        } else if ($(this).attr('id') === 'nav-results') {
            $('#results-section').removeClass('d-none');
        }
    });
    
    // 视图切换功能
    $('#view-card, #view-table').on('click', function() {
        // 移除所有活跃状态
        $('#view-card, #view-table').removeClass('active');
        $(this).addClass('active');
        
        // 显示对应的视图
        if ($(this).attr('id') === 'view-card') {
            $('#results-container').removeClass('d-none');
            $('#table-container').addClass('d-none');
        } else {
            $('#results-container').addClass('d-none');
            $('#table-container').removeClass('d-none');
        }
    });
    
    // 生成测试用例表单提交
    $('#generate-form').on('submit', function(e) {
        e.preventDefault();
        
        // 显示加载提示
        $('#loading-overlay').removeClass('d-none');
        
        // 构建表单数据
        let formData = new FormData(this);
        // 特殊处理复选框
        formData.set('generate_test_data', $('#generate_test_data').is(':checked'));
        
        // 发送Ajax请求
        $.ajax({
            url: '/api/generate',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    displayTestCases(response.test_cases, response.file);
                    // 自动切换到结果页
                    $('#nav-results').click();
                } else {
                    alert('生成失败: ' + response.error);
                }
            },
            error: function(xhr) {
                let errorMsg = '服务器错误';
                try {
                    const response = JSON.parse(xhr.responseText);
                    errorMsg = response.error || errorMsg;
                } catch (e) {}
                alert('生成失败: ' + errorMsg);
            },
            complete: function() {
                // 隐藏加载提示
                $('#loading-overlay').addClass('d-none');
            }
        });
    });
    
    // 上传测试用例文件
    $('#upload-form').on('submit', function(e) {
        e.preventDefault();
        
        // 检查文件
        if (!$('#test-file')[0].files.length) {
            alert('请选择一个文件');
            return;
        }
        
        // 显示加载提示
        $('#loading-overlay').removeClass('d-none');
        
        // 构建表单数据
        let formData = new FormData(this);
        
        // 发送Ajax请求
        $.ajax({
            url: '/api/load_from_file',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    displayTestCases(response.test_cases, 'uploaded_file');
                    // 自动切换到结果页
                    $('#nav-results').click();
                } else {
                    alert('加载失败: ' + response.error);
                }
            },
            error: function(xhr) {
                let errorMsg = '服务器错误';
                try {
                    const response = JSON.parse(xhr.responseText);
                    errorMsg = response.error || errorMsg;
                } catch (e) {}
                alert('加载失败: ' + errorMsg);
            },
            complete: function() {
                // 隐藏加载提示
                $('#loading-overlay').addClass('d-none');
            }
        });
    });
    
    // 下载结果文件
    $('#download-btn').on('click', function() {
        const filename = $(this).data('filename');
        if (filename) {
            window.location.href = '/download/' + filename;
        } else {
            alert('没有可下载的文件');
        }
    });
    
    // 更新测试用例类型和表单字段
    $('#test_type').on('change', function() {
        const testType = $(this).val();
        
        // 设置ID前缀默认值
        if ($('#id_prefix').val() === '') {
            if (testType === '功能测试') {
                $('#id_prefix').attr('placeholder', '留空使用默认值F');
            } else if (testType === '性能测试') {
                $('#id_prefix').attr('placeholder', '留空使用默认值P');
            } else if (testType === '自动化测试') {
                $('#id_prefix').attr('placeholder', '留空使用默认值A');
            }
        }
    });
    
    // 打开测试用例详情模态框
    $(document).on('click', '.btn-view-details', function() {
        const testCaseId = $(this).data('id');
        const testCases = window.lastTestCases || [];
        const testCase = testCases.find(tc => tc.id === testCaseId);
        
        if (testCase) {
            showTestCaseModal(testCase);
        }
    });
    
    // 显示测试用例详情模态框
    function showTestCaseModal(testCase) {
        // 如果模态框不存在则创建
        if ($('#test-case-modal').length === 0) {
            $('body').append(`
                <div class="modal fade test-case-modal" id="test-case-modal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">测试用例详情</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body" id="modal-content">
                                <!-- 内容将动态生成 -->
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            `);
        }
        
        // 填充模态框内容
        let modalContent = `
            <div class="test-case-item">
                <div class="test-case-header">
                    <span class="test-case-id">${testCase.id || 'NO_ID'}</span>
                    <span class="test-case-title">${testCase.title || '无标题'}</span>
                    <span class="${getPriorityClass(testCase.priority)}">${getPriorityDisplay(testCase.priority) || 'P1'}</span>
                </div>
                <div class="test-case-content">
        `;
        
        // 根据测试类型显示不同字段
        if (testCase.precondition) {
            modalContent += `
                <div class="mb-3">
                    <div class="test-case-label">前置条件:</div>
                    <div>${testCase.precondition}</div>
                </div>
            `;
        }
        
        if (testCase.level) {
            modalContent += `
                <div class="mb-3">
                    <div class="test-case-label">级别:</div>
                    <div data-bs-toggle="tooltip" data-bs-placement="top" title="${getLevelTooltip(testCase.level, testCase.test_type || '功能测试')}">${testCase.level}</div>
                </div>
            `;
        }
        
        if (testCase.steps && testCase.steps.length) {
            modalContent += `
                <div class="mb-3">
                    <div class="test-case-label">步骤:</div>
                    <ol class="test-case-steps">
            `;
            
            testCase.steps.forEach(function(step) {
                modalContent += `<li>${step}</li>`;
            });
            
            modalContent += `
                    </ol>
                </div>
            `;
        }
        
        if (testCase.expected) {
            modalContent += `
                <div class="mb-3">
                    <div class="test-case-label">预期结果:</div>
                    <div class="test-case-expected">${testCase.expected}</div>
                </div>
            `;
        }
        
        // 添加测试数据
        if (testCase.test_data && Object.keys(testCase.test_data).length) {
            modalContent += `
                <div class="mb-3">
                    <div class="test-case-label">测试数据:</div>
                    <pre class="mt-2 p-2 bg-light">${JSON.stringify(testCase.test_data, null, 2)}</pre>
                </div>
            `;
        }
        
        modalContent += `
                </div>
            </div>
        `;
        
        $('#modal-content').html(modalContent);
        
        // 显示模态框
        var modal = new bootstrap.Modal(document.getElementById('test-case-modal'));
        modal.show();
    }
    
    // 获取优先级样式类
    function getPriorityClass(priority) {
        if (priority === '高' || priority === 'P0') {
            return 'priority-high';
        } else if (priority === '低' || priority === 'P2') {
            return 'priority-low';
        } else {
            return 'priority-medium';
        }
    }
    
    // 获取优先级显示文本
    function getPriorityDisplay(priority) {
        if (priority === '高') {
            return 'P0';
        } else if (priority === '中') {
            return 'P1';
        } else if (priority === '低') {
            return 'P2';
        } else {
            return priority; // 如果已经是P0/P1/P2格式则不变
        }
    }
    
    // 获取级别提示信息
    function getLevelTooltip(level, testType) {
        if (testType === '功能测试') {
            if (level === '系统级') {
                return '对整个系统功能的测试，验证系统整体行为是否符合需求';
            } else if (level === '集成级') {
                return '测试多个模块组合在一起的交互功能';
            } else if (level === '单元级') {
                return '测试单个功能模块的正确性';
            }
        } else if (testType === '性能测试') {
            if (level === '压力测试') {
                return '在超出正常负载的情况下测试系统性能';
            } else if (level === '负载测试') {
                return '测试系统在预期负载下的性能';
            } else if (level === '容量测试') {
                return '测试系统支持的最大用户数或数据量';
            }
        } else if (testType === '自动化测试') {
            if (level === 'UI级') {
                return '通过用户界面进行的自动化测试';
            } else if (level === 'API级') {
                return '对应用程序接口进行的自动化测试';
            } else if (level === '单元级') {
                return '对代码单元进行的自动化测试';
            }
        }
        return '测试用例的范围级别';
    }
    
    // 测试用例展示函数
    function displayTestCases(testCases, filename) {
        // 保存文件名和测试用例数据
        $('#download-btn').data('filename', filename);
        window.lastTestCases = testCases;
        
        // 清空结果容器
        $('#results-container').empty();
        $('#table-body').empty();
        
        // 按优先级排序
        const priorityOrder = {"高": 0, "中": 1, "低": 2};
        testCases.sort(function(a, b) {
            return priorityOrder[a.priority || "低"] - priorityOrder[b.priority || "低"];
        });
        
        // 添加总结信息
        $('#results-container').prepend(`
            <div class="alert alert-success mb-4">
                <h4 class="alert-heading">生成成功!</h4>
                <p>共生成 ${testCases.length} 个测试用例</p>
            </div>
        `);
        
        // 逐个添加测试用例到卡片视图
        testCases.forEach(function(testCase) {
            let priorityClass = getPriorityClass(testCase.priority);
            
            let testCaseHTML = `
                <div class="test-case-item">
                    <div class="test-case-header">
                        <span class="test-case-id">${testCase.id || 'NO_ID'}</span>
                        <span class="test-case-title">${testCase.title || '无标题'}</span>
                        <span class="${priorityClass}">${getPriorityDisplay(testCase.priority) || 'P1'}</span>
                    </div>
                    <div class="test-case-content">
            `;
            
            // 根据测试类型显示不同字段
            if (testCase.precondition) {
                testCaseHTML += `
                    <div class="mb-3">
                        <div class="test-case-label">前置条件:</div>
                        <div>${testCase.precondition}</div>
                    </div>
                `;
            }
            
            if (testCase.level) {
                testCaseHTML += `
                    <div class="mb-3">
                        <div class="test-case-label">级别:</div>
                        <div data-bs-toggle="tooltip" data-bs-placement="top" title="${getLevelTooltip(testCase.level, testCase.test_type || '功能测试')}">${testCase.level}</div>
                    </div>
                `;
            }
            
            if (testCase.steps && testCase.steps.length) {
                testCaseHTML += `
                    <div class="mb-3">
                        <div class="test-case-label">步骤:</div>
                        <ol class="test-case-steps">
                `;
                
                testCase.steps.forEach(function(step) {
                    testCaseHTML += `<li>${step}</li>`;
                });
                
                testCaseHTML += `
                        </ol>
                    </div>
                `;
            }
            
            if (testCase.expected) {
                testCaseHTML += `
                    <div class="mb-3">
                        <div class="test-case-label">预期结果:</div>
                        <div class="test-case-expected">${testCase.expected}</div>
                    </div>
                `;
            }
            
            // 添加测试数据折叠面板
            if (testCase.test_data && Object.keys(testCase.test_data).length) {
                testCaseHTML += `
                    <div class="mb-3">
                        <div class="test-case-label">测试数据:</div>
                        <button class="btn btn-sm btn-outline-primary mt-2 toggle-data" type="button" data-bs-toggle="collapse" data-bs-target="#data-${testCase.id}">
                            显示测试数据
                        </button>
                        <div class="collapse mt-2" id="data-${testCase.id}">
                            <div class="card card-body">
                                <pre>${JSON.stringify(testCase.test_data, null, 2)}</pre>
                            </div>
                        </div>
                    </div>
                `;
            }
            
            testCaseHTML += `
                    </div>
                </div>
            `;
            
            $('#results-container').append(testCaseHTML);
            
            // 添加到表格视图
            let tableRowHTML = `
                <tr>
                    <td><span class="table-id">${testCase.id || 'NO_ID'}</span></td>
                    <td>${testCase.title || '无标题'}</td>
                    <td><span class="table-badge ${priorityClass}">${getPriorityDisplay(testCase.priority) || 'P1'}</span></td>
                    <td data-bs-toggle="tooltip" data-bs-placement="top" title="${getLevelTooltip(testCase.level, testCase.test_type || '功能测试')}">${testCase.level || 'N/A'}</td>
                    <td>
                        <button class="btn btn-sm btn-primary btn-view-details" data-id="${testCase.id}">
                            <i class="fas fa-eye"></i> 详情
                        </button>
                    </td>
                </tr>
            `;
            
            $('#table-body').append(tableRowHTML);
        });
        
        // 添加测试数据折叠功能
        $('.toggle-data').on('click', function() {
            const icon = $(this).find('i');
            const text = $(this).text().trim();
            if (text === '显示测试数据') {
                $(this).html('<i class="fas fa-chevron-up"></i> 隐藏测试数据');
            } else {
                $(this).html('<i class="fas fa-chevron-down"></i> 显示测试数据');
            }
        });
        
        // 初始化所有工具提示
        $('[data-bs-toggle="tooltip"]').tooltip();
    }
}); 